<template>
  <div class="parsing-wrapper">
    <div class="parsing-header">
      <div v-if="level === 1" class="testing">
        知识点：
        <span v-for="(point, index) in parsing.points" :key="index">{{ point }}</span>
      </div>
      <div v-if="parsing.question_type !== 6" class="examine" @click="check">
        {{ show ? '收起解析' : '查看解析' }}
        <i :class="show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <!-- 非材料题 -->
      <div v-if="show && parsing.question_type !== 6" class="parsing-body">
        <div class="parsing-answer">
          <span v-if="parsing.question_type == 8" class="label">参考答案：</span>
          <span v-else class="label">正确答案：</span>
          <!-- 填空题 -->
          <div v-if="parsing.question_type == 5" class="item">
            <template v-for="(item, index) in rightAnswers">
              （{{ index + 1 }}）{{ item.answers }}
              <template v-if="index != rightAnswers.length - 1" v-html="'\u00a0'" />
            </template>
          </div>
          <!-- 完形填空 -->
          <template v-else-if="parsing.question_type == 7">
            <div v-for="(item, index) in parsing.right_answers" :key="index" class="item" v-html="`${index + 1}:` + item + ' '" />
          </template>
          <!-- 简答 -->
          <template v-else-if="parsing.question_type == 8">
            <div class="item" v-html="parsing.reference_answer" />
          </template>
          <!-- 单选、多选、不定项、判断 -->
          <template v-else>
            <div v-for="(item, index) in rightAnswer" :key="index" class="item" v-html="item.key" />
          </template>
          <!-- <div v-for="(item, index) in rightAnswer" v-else :key="index" class="item" v-html="item.key" /> -->
        </div>
        <div v-if="$util.inArray(parsing.question_type, [1, 2, 3, 4])" class="user-answer">
          <span class="label">学员答案：</span>
          <div v-for="(item, index) in userAnswer" :key="index" class="item" v-html="item.key" />
        </div>
        <div v-if="$util.inArray(parsing.question_type, [5, 8])" class="user-answer">
          <span class="label">学员答案：</span>
          <div v-for="(item, index) in parsing.answer_data" :key="index" class="item" v-html="item" />
        </div>
        <div v-if="$util.inArray(parsing.question_type, [7])" class="user-answer">
          <span class="label">学员答案：</span>
          <div v-for="(item, index) in parsing.user_answers" :key="index" class="item" v-html="`${index + 1}:` + item + ' '" />
        </div>
        <div v-if="parsing.question_type !== 6" class="parsing-footer">
          <span class="key">解析:</span>
          <div class="content" v-html="parsing.analyze" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    // 解析数据
    parsing: {
      type: Object,
      default: () => {
        return {};
      }
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: true
    };
  },
  computed: {
    rightAnswer() {
      if (this.$util.isArray(this.parsing.options)) {
        return this.parsing.options.filter(item => item.is_right == 1);
      }

      return [];
    },
    userAnswer() {
      const userAnswerKeys = this.parsing.answer_data || [];
      const options = this.parsing.options;
      const datas = [];
      userAnswerKeys.forEach(function(id) {
        const answerKey = options.find(item => {
          if (item.id == id) {
            return item.key;
          }
        });
        datas.push(answerKey);
      });

      return datas;
    },
    rightAnswers() {
      if (this.$util.isArray(this.parsing.options)) {
        return this.parsing.options.map(item => {
          item.answers = item.values.join(' 或 ');
          return item;
        });
      }

      return [];
    }
  },
  methods: {
    check() {
      this.show = !this.show;
    }
  }
};
</script>

<style lang="scss" scoped>
.parsing-wrapper {
  margin-top: 24px;
  margin-left: 25px;
  .parsing-header {
    display: flex;
    align-items: center;
    .testing {
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 20px;
      margin-right: 20px;
      min-width: 150px;
    }
    .examine {
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      cursor: pointer;
      line-height: 20px;
    }
  }
  .parsing-body {
    padding: 15px 0;
  }
  .parsing-answer {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    .label {
      color: #606266;
    }
    .item {
      color: #67c23a;
      & + .item {
        margin-left: 5px;
      }
    }
  }
  .user-answer {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    .label {
      color: #606266;
    }
    .item {
      & + .item {
        margin-left: 5px;
      }
    }
  }
  .parsing-footer {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #606266;
    line-height: 24px;
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    .key {
      float: left;
    }
  }
}
</style>
